<template>
  <el-container>
    <el-header>
      <!-- 头部导航 -->
      <el-menu mode="horizontal">
        <router-link to="/movie" style="text-decoration: none"
          ><el-menu-item index="1">首页</el-menu-item></router-link
        >
        <router-link to="/buy" style="text-decoration: none"
          ><el-menu-item index="2">购物车</el-menu-item></router-link
        >
        <router-link to="/order" style="text-decoration: none"
          ><el-menu-item index="3">订单管理</el-menu-item></router-link
        >

        <el-menu-item index="4" @click="goToLogin">登录</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <!-- 用户信息 -->
      <div v-if="isLogin">
        <el-avatar :size="50" :src="user.avatar"></el-avatar>
        <span>{{ user.username }}</span>
      </div>
      <div v-else>
        <el-button type="text" @click="goToLogin">去登录</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      user: {
        username: "",
        avatar: "",
      },
    };
  },
  methods: {
    goToLogin() {
      // 跳转到登录页面
      this.$router.push("/login");
    },
  },
  computed: {
    isLogin() {
      return this.$store.state.user.username !== "";
    },
    user() {
      return this.$store.state.user;
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #409eff;
  color: #fff;
}
</style>
